<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API公开文档</title>
    <!-- 引入 Vue.js -->
    <script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>

<div id="app">
    <div class="header-container">
         <span class="title">API公开文档</span>
    </div>
    <div class="content">
        <div class="product-item-container" v-for="(product, name) in docList" :key="name">
            <div class="product-item-name">
                <span class="product-item-name-content">{{name}}</span>
            </div>
            <div class="product-item-content">
                <div class="android-container">
                    <div class="product-item-title">android</div>
                    <div class="doc-container">
                        <div v-for="(documentVerion, index) in product.android" :key="index" class="doc-content">
                            <button type="text" class="doc-btn" @click="handleClickDoc(name,'android',documentVerion)">
                                <img src="./images/doc-icon.png" width="15px" height="15px"/>
                                <span class="doc-btn-text">{{documentVerion}}</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="ios-container">
                    <div class="product-item-title">ios</div>
                    <div class="doc-container">
                        <div v-for="(documentVerion, index) in product.ios" :key="index" class="doc-content">
                            <button type="text" class="doc-btn" @click="handleClickDoc(name,'ios',documentVerion)">
                                <img src="./images/doc-icon.png" width="15px" height="15px"/>
                                <span class="doc-btn-text">{{documentVerion}}</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 创建 Vue 实例
    var app = new Vue({
        el: '#app',
        data: function(){
            return{
                docList: {},
                currentHost: ""
            } 
        },
        created() {
            
        },
        beforeMount() {
            this.getDocList()
        },
        mounted() {
            let protocol = window.location.protocol;
            let host = window.location.host;
            this.currentHost = protocol + "//" + host;
        },
        methods: {
            getDocList(){
                let _this = this;
                let getDocUrl = this.currentHost + "/api/getDocList"
                axios({
                    method: 'get',//提交方法
                    url: getDocUrl,//提交地址
                }).then((res) => {
                    if(res.data){
                        let resData = res.data;
                        let docList = resData["public/doc"];
                        _this.docList = docList;
                    }else{
                        _this.$notify({
                            title: '警告',
                            message: '获取文档列表失败',
                            type: 'warning'
                        });
                    }
                }).catch((err) => {
                    console.error("加载失败",err)
                    _this.$notify.error({
                        title: '错误',
                        message: '获取文档列表失败'
                    });
                })
            },
            handleClickDoc(name,type,docVerion){
                let docUrl = this.currentHost + "/public/doc/" + name + "/" + type + "/" + docVerion;
                let encodedDocUrl = encodeURI(docUrl);
                window.location.href= encodedDocUrl;
            }
        }
    });
</script>

</body>
</html>
